<template>
  <div class="bg-gray-50">
    <TopBar />
    <Aside />
    <div class="w-4/5 m-auto">
      <!-- 面包屑导航 -->
      <nav class="flex m-4 text-gray-500">
        <ul class="flex items-center space-x-2">
          <li><a href="#" class="hover:text-red-500 transition-colors">首页</a></li>
          <li><i class="">&gt;</i></li>
          <li class="text-gray-700 truncate max-w-[200px]">{{ spu.spuName }}</li>
        </ul>
      </nav>

      <!-- 店家 -->
      <!-- 商家信息 -->
      <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
          <div class="flex items-center mb-4 md:mb-0">
            <div class="w-16 h-16 rounded-lg bg-red-600 flex items-center justify-center text-white font-bold text-xl">
              Logo
            </div>
            <div class="ml-4">
              <h3 class="font-bold text-gray-800">{{ seller.sellerName }}</h3>
              <div class="flex items-center text-sm text-gray-500 mt-1">
                <span class="mr-3">联系电话 : {{ seller.contactPhone }}</span>
              </div>
            </div>
          </div>

          <div class="w-full md:w-1/2">
            <div class="flex h-12 rounded-lg overflow-hidden border border-red-500">
              <input type="search" class="flex-1 px-4 focus:outline-none" placeholder="搜索商品..." v-model="searchName">
              <button class="w-24 bg-red-500 text-white hover:bg-red-600 transition-colors"
                @click="clickSearch(searchName)">
                全站搜索
              </button>
            </div>
          </div>
        </div>
      </div>
      <!-- 商品 -->
      <div class="flex justify-between">
        <div class="w-55/100">
          <!-- sku图片 -->
          <div class="flex">
            <div class="w-1/5">
              <div v-if="sku.length" class="p-2 cursor-pointer " v-for="(item, index) in 1" :key="item.id"
                @click="imgIndex = index">
                <img class="rounded-md" :class="`${imgIndex == index ? 'border-2 border-red-500' : ''}`"
                  :src="sku[skuIndex].skuImages" alt="">
              </div>
            </div>
            <div v-if="sku.length" class="w-4/5 p-2">
              <img class="w-full rounded-xl" :src="sku[skuIndex].skuImages" alt="">
            </div>
          </div>
          <!-- spu数据 -->
          <div class="my-5">
            <div class="text-3xl font-bold mb-5">商品详情</div>
            <div class="flex flex-wrap border border-gray-200 rounded-md overflow-hidden">
              <div class="flex flex-1/2" style="margin: -1px;">
                <!-- <div class="w-40 px-5 py-2 bg-slate-100">{{ item.spuPropName }}</div> -->
                <div class="flex-1 px-5 py-2 bg-gray-50 border border-gray-200">{{ spu.spuDesc
                }}
                </div>
              </div>
            </div>
          </div>

        </div>
        <SkuDetail @changeSku="changeSku" :skuIndex />
      </div>
    </div>
  </div>
</template>

<script setup>
import Aside from '@/components/Aside.vue';
import TopBar from '@/components/TopBar.vue';
import { onMounted, ref } from 'vue';
import SkuDetail from './SkuDetail.vue';
import { useRoute, useRouter } from 'vue-router';
import { getSKUAPI, getSpuByIdApi } from '@/apis/products';
import { getSellerInfo } from '@/apis/user';
const route = useRoute()
const router = useRouter()
let skuIndex = ref(0)
let imgIndex = ref(0)
let searchName = ref('')
const seller = ref()
const getSeller = async () => {
  let res = await getSellerInfo()
  seller.value = res.data
}
getSeller()
const clickSearch = (name) => {
  router.push(`/items/${name}`)
}
let changeSku = (n) => {
  skuIndex.value = n
}
const spu = ref({})
const sku = ref([])
const getSpu = async () => {
  let res = await getSpuByIdApi(route.params.id)
  spu.value = res.data
}
const getSku = async () => {
  let res = await getSKUAPI(route.params.id)
  sku.value = res.data
}
onMounted(() => {
  getSku()
  getSpu()
})
</script>

<style lang="scss" scoped></style>